<template>
  <div class="admin-articlelist-list">
    <div class="admin-articlelist-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/index/home' }"
          ><i class="el-icon-s-home"> 首页</i></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/admin/index/articlelist"
            ><i class="el-icon-document">文章列表</i></a
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="admin-articlelist-select">
      <span>搜索文章</span>
      <input v-model="proname" type="text" placeholder="文章名称" />

      <el-button>查询</el-button>
    </div>

    <div class="admin-articlelist-btn">
      <router-link to="/admin/index/article/add"
        ><el-button type="primary">添加文章</el-button></router-link
      >&nbsp;
      <el-button type="danger">批量删除</el-button>
    </div>
    <div class="admin-articlelist-pro">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="100"
        >
        </el-pagination>
      </div>
      <div class="admin-articlelist-pro-main">
        <div>
          <table>
            <thead>
              <tr>
                <th><input type="checkbox" />文章ID</th>
                <th>标题</th>
                <th>简述</th>
                <th>添加时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="item.artid">
                <td><input type="checkbox" />{{ index + 1 }}</td>
                <td>{{ item.title }}</td>
                <td>{{ item.sketch }}</td>
                <td>{{ item.arttime }}</td>
                <td>
                  <el-button type="primary" style="line-height: 10px"
                    >编辑</el-button
                  >
                  <el-button type="danger" style="line-height: 10px"
                    >删除</el-button
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let url = `article/findAll`;
    this.axios.get(url).then((res) => {
      console.log(res);
      this.tableData = res.data.data;
    });
  },
  data() {
    return {
      time: "",
      proname: "",
      currentPage: 1,
      tableData: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-articlelist-list {
  .admin-articlelist-select {
    display: flex;
    line-height: 40px;
    margin: 20px 0;
    span {
      margin-right: 10px;
    }
    input {
      padding: 10px;
      margin-right: 10px;
    }
  }
  .admin-articlelist-add {
    width: 85%;
    border: 1px solid rgba(182, 181, 182, 0.4);
    padding: 10px;
    a {
      margin-right: 10px;
    }
  }
  .admin-articlelist-btn {
    border: 1px solid rgba(222, 222, 222, 0.4);
    padding: 10px;
  }
  .admin-articlelist-pro:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
  }
  .admin-articlelist-pro {
    margin-top: 10px;
    width: 99%;
    .admin-articlelist-pro-main {
      float: left;
      table {
        margin-left: 10px;
        width: 72vw;
        min-width: 1100px;
        text-align: center;
        border-collapse: collapse;
        tr {
          display: flex;
        }
        th {
          padding: 10px 0;
          width: 21%;
          border: 1px solid gray;
          min-width: 150px;
        }
        td {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 4px 0;
          line-height: 32px;
          width: 21%;
          border: 1px solid gray;
          min-width: 150px;
        }
        th:first-child,
        td:first-child {
          width: 80px;
          min-width: 80px;
        }
      }
    }
  }
  .block {
    float: right;
  }
}
</style>
